<!--
 * @Descripttion: 增加用户
 * @Author: YuZhenJing
 * @Date: 2020-01-12 12:01:01
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-05-14 18:33:22
 -->
<template>
  <div class="user-add">
    <tf-dialog
      :title="windowInfo.title"
      :title-icon="windowInfo.titleIcon"
      :visible.sync="tfVisible"
    >
      <template v-slot:content>
        <el-card shadow="never">
          <el-form :model="formItem" :rules="rules" label-width="100px" ref="userForm">
            <el-row :gutter="12">
              <el-col :span="12">
                <el-form-item label="帐户名称" prop="username">
                  <el-input v-model="formItem.username"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户名称" prop="personName">
                  <el-input v-model="formItem.personName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户性别" prop="userGender">
                  <el-select clearable v-model="formItem.userGender">
                    <el-option
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                      v-for="item in userGenderOptions"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="组织机构" prop="orgCode">
                  <el-cascader
                    :options="orgTreeData"
                    :props="{ emitPath: false, checkStrictly: true }"
                    :show-all-levels="false"
                    clearable
                    filterable
                    v-model="formItem.orgCode"
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电子邮件" prop="userEmail">
                  <el-input v-model="formItem.userEmail"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="帐户状态" prop="isEnabled">
                  <el-select clearable v-model="formItem.isEnabled">
                    <el-option
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                      v-for="item in accountStatusOptions"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账户类型" prop="accountType">
                  <el-select clearable v-model="formItem.accountType">
                    <el-option
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                      v-for="item in accountTypeOptions"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="用户分组" prop="userGroupId">
                  <el-select clearable v-model="formItem.userGroupId">
                    <el-option
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                      v-for="item in userGroupList"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号码" prop="userPhone">
                  <el-input v-model="formItem.userPhone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="固定电话" prop="userFixedTelephone">
                  <el-input v-model="formItem.userFixedTelephone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="登录密码" prop="password">
                  <el-input type="password" v-model="formItem.password"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="确认密码" prop="confirmPassword">
                  <el-input type="password" v-model="formItem.confirmPassword"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </template>
      <template v-slot:footer>
        <el-row :gutter="12" style="padding:5px;">
          <el-col :span="24" style="text-align:center">
            <el-button
              :loading="saveLoading"
              @click="submitForm"
              icon="el-icon-circle-plus-outline"
              type="primary"
            >保存</el-button>
          </el-col>
        </el-row>
      </template>
    </tf-dialog>
  </div>
</template>
<script>
export default {
  components: {
    'tf-dialog': require('@/components/common/dialog/TfDialog').default
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    userGenderOptions: {
      type: Array,
      required: true
    },
    accountTypeOptions: {
      type: Array,
      required: true
    },
    accountStatusOptions: {
      type: Array,
      required: true
    },
    userGroupList: {
      type: Array,
      required: true
    },
    orgTreeData: {
      type: Array,
      required: true
    }
  },
  computed: {
    tfVisible: {
      get() {
        return this.visible
      },
      set(s) {
        // 重置表单
        this.$refs.userForm.resetFields()
        this.$emit('update:visible', s)
      }
    }
  },
  data() {
    //用户名称唯一性验证
    let userNameUnique = (rule, value, callback) => {
      const unique = this.$html.get('user/userIsUnique/' + value)
      unique
        .then(data => {
          if (data.returnType == 'success') {
            if (data.returnData) {
              return callback()
            } else {
              return callback(new Error('【 ' + value + ' 】已经被占用！'))
            }
          }
        })
        .catch(() => {
          console.log('error:userNameUnique')
        })
    }
    //比较两次密码一致性
    let sameAsPassword = (rule, value, callback) => {
      if (value == this.formItem.password) {
        return callback()
      } else {
        return callback(new Error('输入的密码不一致!'))
      }
    }

    return {
      // 窗体信息
      windowInfo: {
        titleIcon: 'el-icon-circle-plus-outline',
        title: '新增用户'
      },
      saveLoading: false,
      rules: {
        username: [
          { required: true, message: '账户名称不能为空!', trigger: 'blur' },
          { max: 19, message: '账户名称不得超过【19】个字符', trigger: 'blur' },
          {
            pattern: /^[a-zA-Z0-9_-]{4,16}$/,
            message: '账号名称必须为：4到16位（字母，数字，下划线，减号）',
            trigger: 'blur'
          },
          { validator: userNameUnique, trigger: 'blur' }
        ],
        personName: [
          { required: true, message: '用户名称不能为空!', trigger: 'blur' },
          { max: 50, message: '用户名称不得超过【50】个字符', trigger: 'blur' }
        ],
        userGender: [
          { required: true, message: '用户性别不能为空!', trigger: 'change' }
        ],
        userPhone: [
          { required: true, message: '手机号码不能为空!', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式不正确',
            trigger: 'blur'
          }
        ],
        userFixedTelephone: [
          {
            pattern: /^((0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/,
            message: '固定电话格式不正确',
            trigger: 'blur'
          }
        ],
        userEmail: [
          { required: true, message: '电子邮件不能为空!', trigger: 'blur' },
          { type: 'email', message: '电子邮件格式不正确', trigger: 'blur' }
        ],
        isEnabled: [
          { required: true, message: '账户状态不能为空!', trigger: 'change' }
        ],
        accountType: [
          { required: true, message: '账户类型不能为空!', trigger: 'change' }
        ],
        userGroupId: [
          { required: true, message: '用户分组不能为空!', trigger: 'change' }
        ],
        orgCode: [
          { required: true, message: '组织机构不能为空!', trigger: 'change' }
        ],
        password: [
          { required: true, message: '用户密码不能为空!', trigger: 'blur' },
          { max: 50, message: '用户密码不得超过【50】个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '用户密码不能为空!', trigger: 'blur' },
          { validator: sameAsPassword, trigger: 'blur' }
        ]
      },
      formItem: {
        username: '',
        personName: '',
        userGender: '',
        userPhone: '',
        userFixedTelephone: '',
        userEmail: '',
        isEnabled: 'true',
        accountType: 'sys_universal',
        userGroupId: '',
        orgCode: '',
        password: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    // 提交表单保存用户信息
    submitForm() {
      this.$refs.userForm.validate(valid => {
        if (valid) {
          this.saveLoading = true
          const saveFormItem = this.$html.post('user/saveUser', this.formItem)
          saveFormItem
            .then(data => {
              if (data.returnType == 'success') {
                this.saveLoading = false
                this.$emit('request')
                this.$notify({
                  title: '成功',
                  message: '保存成功',
                  type: 'success'
                })
                this.tfVisible = false
              }
            })
            .catch(() => {
              this.saveLoading = false
              console.log('error:userAdd/submitForm')
            })
        } else {
          return false
        }
      })
    }
  }
}
</script>
